<template>
  <div id="main3"></div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import * as echarts from "echarts";
var option;

option = {
  color: ['rgba(216, 231, 85, 0.92)'],
  xAxis: {
    type: 'category',
    data: ['No.1', 'No.2', 'No.3', 'No.4', 'No.5']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [20, 15, 13, 12, 11, 8, 7],
      barWidth: '15%',
      itemStyle: {
        barBorderRadius: 12
      },
      type: 'bar'
    }
  ]
};
onMounted(() => {
  var chartDom = document.getElementById("main3");
  var myChart = echarts.init(chartDom);
  option && myChart.setOption(option);
});
</script>

<style>
#main3 {
  width: 100%;
  height: 100%;
}
</style>
